<template>
  <div class="mod-home">
    <el-row id="pieChart" type="flex" justify="space-around">
      <el-col :span="8">
        <div id="vulCount" style="width: 100%; height: 100%;"></div>
      </el-col>
      <el-col :span="8">
        <div id="riskLevel" style="width: 100%; height: 100%;"></div>
      </el-col>
      <el-col :span="8">
        <div id="languageCount" style="width: 100%; height: 100%;"></div>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%; align-content: center;"
    >
      <el-table-column label="国家信息安全漏洞库" header-align="center">
        <el-table-column
          fixed
          prop="year"
          label="年份"
          min-width="1"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="updateDate"
          label="更新日期"
          min-width="1"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="size"
          label="大小(MB)"
          min-width="1"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  methods: {
    drawPieChart1() {
      // console.log("饼状图1")
      // 初始化 echarts 实例
      this.vulCount = echarts.init(document.getElementById('vulCount'))
      // 绘制图表
      this.vulCount.setOption({
        title: {
          text: '',
          subtext: 'cve-cnvd-cnnvd数量统计图',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion1
        },
        series: [
          {
            name: 'cve-cnvd-cnnvd数量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['red', '#1ab394', 'lightgray']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    drawPieChart2() {
      // 初始化 echarts 实例
      this.vulCount = echarts.init(document.getElementById('riskLevel'))
      // 绘制图表
      this.vulCount.setOption({
        title: {
          text: '',
          subtext: '风险等级数量统计图',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion2
        },
        series: [
          {
            name: '风险等级数量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData2,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['red', 'lightred', 'yellow', '#1ab394']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    drawPieChart3() {
      // 初始化 echarts 实例
      this.vulCount = echarts.init(document.getElementById('languageCount'))
      // 绘制图表
      this.vulCount.setOption({
        title: {
          text: '',
          subtext: '编程语言漏洞分布统计图',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion3
        },
        series: [
          {
            name: '语言对应的数量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData3,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['red', 'lightred', 'yellow', '#1ab394', 'arial', 'lightgreen', 'lightgray']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    initPieData() {
      this.$http({
        url: this.$http.adornUrl('/project/index/cve-count'),
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.data)
          for (let i = 0; i < data.data.length; i++) {
            this.opinion1[i] = data.data[i].name
            this.opinionData1[i].name = data.data[i].name
            this.opinionData1[i].value = data.data[i].count
          }
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart1()
        } else {
          this.opinionData1 = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/project/index/security-level'),
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.data)
          for (let i = 0; i < data.data.length; i++) {
            const level = data.data[i].level
            const count = data.data[i].count
            // 对应关系：1 严重 2 高危 3 中危 4 低危
            if (level === 1) {
              this.opinion2[i] = '严重'
              this.opinionData2[i].name = '严重'
            } else if (level === 2) {
              this.opinion2[i] = '高危'
              this.opinionData2[i].name = '高危'
            } else if (level === 3) {
              this.opinion2[i] = '中危'
              this.opinionData2[i].name = '中危'
            } else {
              this.opinion2[i] = '低危'
              this.opinionData2[i].name = '低危'
            }
            this.opinionData2[i].value = count
          }
          // setTimeout(this.drawPieChart2, 700)
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart2()
        } else {
          this.opinionData2 = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/project/index/language-count'),
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.data)
          for (let i = 0; i < data.data.length; i++) {
            const language = data.data[i].language
            const count = data.data[i].count
            this.opinion3[i] = language
            this.opinionData3[i].name = language
            this.opinionData3[i].value = count
          }
          // setTimeout(this.drawPieChart3, 700)
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart3()
        } else {
          this.opinionData3 = []
        }
      })
    },
    initTableData() {
      this.$http({
        url: this.$http.adornUrl('/project/spider/xml/table'),
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if (data && data.code === 0) {
          data.data = JSON.parse(data.data)
          this.tableData = data.data
        } else {
          this.tableData = []
        }
      })
    },
    selfAdaption: function selfAdaption() {
      // 实现自适应
      const _this = this
      const vulCountTemp = document.getElementById('vulCount')
      const riskLevelTemp = document.getElementById('riskLevel')
      const languageCountTemp = document.getElementById('languageCount')
      if (!vulCountTemp || !riskLevelTemp || !languageCountTemp) {
        return false
      } else {
        setInterval(() => {
          window.onresize = function() {
            const pieChart = document.getElementById('pieChart')
            pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
            //  _this.chart = echarts.init(self.$refs.myEchart);
            _this.vulCount = echarts.init(vulCountTemp)
            _this.vulCount.resize()
            _this.riskLevel = echarts.init(riskLevelTemp)
            _this.riskLevel.resize()
            _this.languageCount = echarts.init(languageCountTemp)
            _this.languageCount.resize()
          }
        }, 1)
      }
      // 弃用方案，体验不佳
      // setInterval(() => {
      //   window.onresize = function () {
      //     // onresize 时要触发的函数，但是只能触发一次
      //     location.reload()
      //   }
      // }, 1)
    }
  },
  data() {
    return {
      tableData: [{
        year: '最新',
        updateDate: '2022-02-08',
        size: '0.15'
      }],
      vulCount: '',
      opinion1: ['cve数量', 'cnvd数量', 'cnnvd数量'],
      opinionData1: [
        { value: 13, name: 'cve数量', itemStyle: 'red' },
        { value: 19, name: 'cnvd数量', itemStyle: '#1ab394' },
        { value: 21, name: 'cnnvd数量', itemStyle: 'lightgray' }
      ],
      // 1 严重 2 高危 3 中危 4 低危
      riskLevel: '',
      opinion2: ['严重', '高危', '中危', '低危'],
      opinionData2: [
        { value: 13, name: '严重', itemStyle: 'red' },
        { value: 19, name: '高危', itemStyle: 'lightred' },
        { value: 21, name: '中危', itemStyle: 'yellow' },
        { value: 42, name: '低危', itemStyle: '#1ab394' }
      ],
      languageCount: '',
      opinion3: ['php', 'python', 'dotnet', 'java', 'golang', 'js', 'ruby'],
      opinionData3: [
        { value: 13, name: 'php', itemStyle: 'red' },
        { value: 19, name: 'python', itemStyle: 'lightred' },
        { value: 21, name: 'dotnet', itemStyle: 'yellow' },
        { value: 42, name: 'java', itemStyle: '#1ab394' },
        { value: 31, name: 'golang', itemStyle: 'arial' },
        { value: 31, name: 'js', itemStyle: 'lightgreen' },
        { value: 31, name: 'ruby', itemStyle: 'lightgray' }
      ]
    }
  },
  mounted: function() {
    this.initPieData()
    this.initTableData()
    this.selfAdaption()
  }
}
</script>

<style>
.mod-home {
  line-height: 1.5;
  height: 100%;
}

#pieChart {
  margin-bottom: 20px;
}
</style>
